<!-- 登录页面 -->
<template>
	<scroll-view>
		<view class="personal-center-main">
			<view class="oneView">
				<view class="image">
					<image src="../../static/c9.png"></image>
				</view>
				<view class="userName">
					<text>用户昵称</text>
					<text>18281717023</text>
				</view>
			</view>
			<view class="towView">
				<view class="towView-iem"><text>0</text><text>余额</text></view>
				<view class="towView-iem"><text>0</text><text>积分</text></view>
				<view class="towView-iem"><text>0</text><text>卡</text></view>
				<view class="towView-iem"><text>0</text><text>优惠卷</text></view>
			</view>
			<view class="threeView">
				<view><text>我的权益</text></view>
				<view class="menu">
					<view class="menu-item">
						<image src="../../static/c1.png"></image>
						<text>代付款</text>
					</view>
					<view class="menu-item">
						<image src="../../static/c1.png"></image>
						<text>代发货</text>
					</view>
					<view class="menu-item">
						<image src="../../static/c1.png"></image>
						<text>代收货</text>
					</view>
					<view class="menu-item">
						<image src="../../static/c1.png"></image>
						<text>代评价</text>
					</view>
					<view class="menu-item">
						<image src="../../static/c1.png"></image>
						<text>售后</text>
					</view>
				</view>
				<view class="list">
					<uni-list>
						<uni-list-item title="订单中心"></uni-list-item>

						<uni-list-item title="购物车"></uni-list-item>


						<uni-list-item title="收货地址"></uni-list-item>

						<uni-list-item title="个人信息"></uni-list-item>
						<uni-list-item title="账号设置"></uni-list-item>
						<uni-list-item title="礼品卡"></uni-list-item>
					</uni-list>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import CryptoJS from 'crypto-js'
	export default {
		components: {

		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		created() {

		},
		// 方法
		methods: {
			//登录
			login() {
				console.log("登录");
				console.log(this.phoneNumber);
				console.log(this.phonePassword);
				// 密钥
				const key = CryptoJS.enc.Utf8.parse("12345612")
				// 偏移量
				const iv = CryptoJS.enc.Utf8.parse('1234567890123456')
				// 需要加密的数据
				const data = '需要加密的数据'
				// 加密后的数据
				const keyHex = CryptoJS.AES.Utf8.parse("wYDJty8o8HE6YjJS");


				const encrypted = CryptoJS.AES.encrypt("123222222222222221212121", keyHex, {
					mode: CryptoJS.mode.AES,
					padding: CryptoJS.pad.Pkcs7
				}).toString();
				const encryptedData = CryptoJS.AES.encrypt(data, key, {
					iv: iv,
					mode: CryptoJS.mode.CBC,
					padding: CryptoJS.pad.Pkcs7
				}).toString()
				console.log(encrypted)
			},
			// 找回密码跳转页面
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 判断显示登录按钮
			onInput() {
				this.timeOut && clearTimeout(this.timeOut)
				this.timeOut = setTimeout(() => {
					if (this.type == 1000) {
						if (this.phoneNumber && this.phonePassword) {
							this.btnShow = true;
						} else {
							this.btnShow = false;
						}
					} else {
						if (this.idNumber && this.idPassword) {
							this.btnShow = true;
						} else {
							this.btnShow = false;
						}
					}
				}, 100);
			},
			// 点击登录
			onSubmit() {
				// 判断登录方式为手机号登录
				if (this.type == 1000) {
					// 判断验证手机号
					if (!this.phoneNumber) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none',
						});
						return;
					}
					const phoneNumber = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
					if (!phoneNumber.test(this.phoneNumber)) {
						uni.showToast({
							title: '手机号输入不正确',
							icon: 'none',
						});
						return;
					}
					// 判断验证手机密码
					if (!this.phonePassword) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none',
						});
						return;
					}
					uni.showToast({
						title: '正在登录',
						icon: 'loading',
					});
				} else {
					// 判断验证账号
					if (!this.idNumber) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none',
						});
						return;
					}
					// 判断验证账号密码
					if (!this.idPassword) {
						uni.showToast({
							title: '请输入账号密码',
							icon: 'none',
						});
						return;
					}
					uni.showToast({
						title: '正在登录',
						icon: 'loading',
					});
				}
			},




		}
	}
</script>

<style scoped lang="less">
	@import"@/css/publicCssUtil.css";

	.personal-center-main:before {
		//background-image: url('http://101.42.255.238:8911/01lb.webp'),
		/*使用before 选择器在被选元素的内容前面插入内容。*/
		width: 100%;
		height: 100%;
		/*设置为全屏背景模式*/
		// background-image: url(https://img.js.design/assets/img/64d06c390ee8cc4ba3fc36e7.png#ff4216ce5abcf508cbd59768dbc53318);
		// background-image: url(http://101.42.255.238:8911/01lb.webp);
		// background-image: url(http://101.42.255.238:8911/02lb.webp);
		background-image: url(http://101.42.255.238:8911/03lb.webp);

		background-size: cover;
		// background-attachment: fixed; /*将图片固定*/
		position: absolute;
		/*图片定位*/
		top: 0;
		left: 0;
		content: "";
		z-index: -1;
		/*设置该标签等级，让其始终位于最底层*/
		-webkit-filter: opacity(10%);
		/*设置透明度   blur还可以改变照片的模糊度*/
		filter: opacity(10%);

	}

	.personal-center-main {
		// margin: 20px;
		margin:  1px 20px;

		.oneView {
			display: flex;
			// align-items: center;
			margin-top: 350rpx;

			.image {

				display: flex;
				border-radius: 60rpx;

				image {
					width: 100rpx;
					height: 100rpx;

				}
			}

			.userName {

				display: flex;
				justify-content: space-between;
				flex-direction: column;
				// test{
				// 	display: flex;
				// }
			}
		}

		.towView {

			margin: 20rpx 40rpx;

			display: flex;
			justify-content: space-between;

			.towView-iem {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				align-items: center;
				// border: 1rpx solid red;
			}

		}

		.threeView {
			background-color: #ffffff;
			margin-top: 60rpx;
			.menu {


				display: flex;
				justify-content: space-around;

				.menu-item {
					margin: 10rpx 0rpx 20rpx 0rpx;
					display: flex;
					// border: 1rpx solid red;
					justify-content: space-around;
					flex-direction: column;
					align-items: center;
				}

				image {
					width: 100rpx;
					height: 100rpx;

				}
			}

		}
	}
</style>